<template>
    <div class="house-content" v-loading="loading">
        <el-card class="box-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <div>基本标签</div>
                    <div><el-button type="primary" :icon="CirclePlus" size="small" @click="addBaseTag"
                            plain>添加标签</el-button><el-button type="danger" size="small" :icon="Delete"
                            @click="showBaseDelete = !showBaseDelete" plain>{{
                                showBaseDelete? '取消删除':
                                    '删除标签'
                            }}</el-button></div>
                </div>
            </template>
            <template v-for="(tag, index) in baseTags" :key="tag.id">
                <el-tag v-if="tag.type === 'personBaseTag'" @close="deleteTag(tag, index)" :closable="showBaseDelete" class="mx-1"
                    size="large">
                    {{ Dict.getValue(tag.type, tag.name) }}
                </el-tag>
            </template>
            <el-empty v-if="baseTags.length === 0" description="暂无标签信息" :image-size="60" />
        </el-card>
        <el-card class="box-card" style="margin-top:12px;" shadow="never">
            <template #header>
                <div class="card-header">
                    <div>特殊标签</div>
                    <div><el-button type="primary" :icon="CirclePlus" size="small" @click="addSpecialTag"
                            plain>添加标签</el-button><el-button type="danger" size="small" :icon="Delete"
                            @click="showSpecialDelete = !showSpecialDelete" plain>{{
                                showSpecialDelete? '取消删除':
                                    '删除标签'
                            }}</el-button></div>
                </div>
            </template>
            <template v-for="(tag, index) in specialTags" :key="tag.id">
                <el-tag v-if="tag.type !== 'personBaseTag'" @close="deleteTag(tag, index)" :closable="showSpecialDelete"
                    class="mx-1" size="large">
                    {{ Dict.getValue(tag.type, tag.name) }}
                </el-tag>
            </template>
            <el-empty v-if="specialTags.length === 0" description="暂无标签信息" :image-size="60" />
        </el-card>
        <SpecialTagFormDialog ref="specialTagFormDialogRef" />
        <BaseTagFormDialog ref="baseTagFormDialogRef" />
    </div>
</template>

<script setup lang="tsx" name="personTag">

import { ref, reactive, onMounted } from "vue";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import { Dict } from '/@/utils/storage';
import { useHandleData } from "/@/hooks/useHandleData";

import BaseTagFormDialog from "./components/BaseTagFormDialog.vue";
import SpecialTagFormDialog from "./components/SpecialTagFormDialog.vue";
import * as api from "/@/api/person/personTag";

const props = defineProps({
    currentNode: {
        type: Object,
        default: () => { }
    }
})

const baseTags = ref<any>([]), specialTags = ref<any>([]), loading = ref<boolean>(true)

const deleteTag = async (item: any, index: any) => {
    const data = await useHandleData(api.remove, { id: item.id }, '确定删除标签吗')
    if (data) {
        if (item.type === 'personBaseTag') {
            baseTags.value.splice(index, 1);
        } else {
            specialTags.value.splice(index, 1);
        }

    }
}

const optionSuccess = (item: any) => {
    if (item.type === 'personBaseTag') {
        baseTags.value.push(item);
    } else {
        specialTags.value.push(item);
    }
}


const showBaseDelete = ref<boolean>(false), showSpecialDelete = ref<boolean>(false), baseTagFormDialogRef = ref(), specialTagFormDialogRef = ref();
//添加基础标签
const addBaseTag = () => {
    //弹框
    const params = {
        title: '新增基本标签',
        callback: optionSuccess,
        rowData: { personId: props.currentNode.id },
        apiUrl: api.add
    }
    baseTagFormDialogRef.value!.acceptParams(params);
}

//添加特殊标签
const addSpecialTag = () => {
    const params = {
        title: '新增特殊标签',
        callback: optionSuccess,
        rowData: { personId: props.currentNode.id },
        apiUrl: api.add
    }
    specialTagFormDialogRef.value!.acceptParams(params);
}

onMounted(async () => {
    const res = await api.getList({ personId: props.currentNode.id })
    if (res) {
        const { data = [] } = res;
        for (let item of data) {
            if (item.type === 'personBaseTag') {
                baseTags.value.push(item)
            } else {
                specialTags.value.push(item)
            }
        }
    }
    loading.value = false;
})
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    padding: 12px;
}

:deep(.el-card__header) {
    padding: 10px 18px;
}

:deep(.el-tag--large) {
    margin-right: 6px;
}

.house-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>